<template>
  <div id="detail" class="detail-slide">
    <Theader title="电影详情">
      <i class="iconfont icon-right" @click="back"></i>
    </Theader>
    <div id="content" class="contentDetail">
      <div class="detail_list">
        <div class="detail_list_bg" :style="bg(movie.mainpic)"></div>
        <div class="detail_list_filter"></div>
        <div class="detail_list_content">
          <div class="detail_list_img">
            <img :src="movie.mainpic" alt="" />
          </div>
          <div class="detail_list_info">
            <h2>{{ movie.title }}</h2>
            <p>{{ movie.daoyan }}</p>
            <p>9.2</p>
            <p>{{ movie.type }}</p>
            <p>{{ movie.country }} / {{ movie.duration }}</p>
            <p>{{ movie.time }}上映</p>
          </div>
        </div>
      </div>
      <div class="detail_intro">
        <p>
          {{ movie.content }}
        </p>
      </div>
      <div class="detail_player swiper-container">
        <ul class="swiper-wrapper">
          <li
            class="swiper-slide"
            v-for="person in movie.photos"
            :key="person.name"
          >
            <div>
              <img :src="person.img" alt="" />
            </div>
            <p>{{ person.name }}</p>
            <p>{{ person.type }}</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import Theader from "@/components/Theader";
export default {
  name: "Detail",
  // 组件内守卫
  // 访问电影详情时，如果没有登录跳转到登录页
  beforeRouteEnter(to, from, next) {
    let user = window.localStorage.getItem("username");
    let pass = window.localStorage.getItem("password");
    if (user && pass) {
      next();
    } else {
      next("/login");
    }
  },
  components: { Theader },

  data() {
    return {
      movie: {},
    };
  },
  methods: {
    back() {
      this.$router.back();
    },
    bg(pic) {
      return {
        backgroundImage: "url(" + pic + ")",
      };
    },
  },
  async created() {
    let id = this.$route.params.id;
    console.log(id);
    // 根据id请求相关电影数据
    let data = await this.$axios.get("/api/detail?id=" + id);
    this.movie = data;
    this.$nextTick(function () {
      new Swiper(".detail_player", {
        slidesPerView: "auto",
        freeMode: true,
        freeModeSticky: true,
      });
    });
  },
};
</script>

<style scoped>
#detail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 99;
  min-height: 100%;
  background: white;
}
/* 书写进入动画 */
.detail-slide {
  animation: slide 0.5s;
}
@keyframes slide {
  from {
    transform: translateX(100%);
  }
  to {
    transform: translateX(0);
  }
}
#content.contentDetail {
  display: block;
  margin-bottom: 0;
}
#content .detail_list {
  height: 200px;
  width: 100%;
  position: relative;
  overflow: hidden;
}
.detail_list .detail_list_bg {
  width: 100%;
  height: 100%;
  background: url(/images/movie_1.jpg) 0 40%;
  filter: blur(20px);
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
}
.detail_list .detail_list_filter {
  width: 100%;
  height: 100%;
  position: absolute;
  background-color: #40454d;
  opacity: 0.55;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
}
.detail_list .detail_list_content {
  display: flex;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 2;
}
.detail_list .detail_list_img {
  width: 108px;
  height: 150px;
  border: solid 1px #f0f2f3;
  margin: 20px;
}
.detail_list .detail_list_img img {
  width: 100%;
  height: 100%;
}
.detail_list .detail_list_info {
  margin-top: 20px;
}
.detail_list .detail_list_info h2 {
  font-size: 20px;
  color: white;
  font-weight: normal;
  line-height: 40px;
}
.detail_list .detail_list_info p {
  color: white;
  line-height: 20px;
  font-size: 14px;
  color: #ccc;
}

#content .detail_intro {
  padding: 10px;
}
#content .detail_player {
  margin: 20px;
}
.detail_player .swiper-slide {
  width: 70px;
  margin-right: 20px;
  text-align: center;
  font-size: 14px;
}
.detail_player .swiper-slide img {
  width: 100%;
  margin-bottom: 5px;
}
.detail_player .swiper-slide p:nth-of-type(2) {
  color: #999;
}
</style>